{{#section 'head'}}
  <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
  <script id="nurseryRhymeTemplate" type="text/x-handlebars-template">
    Marry had a little <b>\{{animal}}</b>,its <b>\{{bodyPart}}</b>
    was <b>\{{adjective}}</b> as <b>\{{noun}}</b>.
  </script>
{{/section}}

<div id="nurseryRhyme">Click a button....</div>
<hr>
<button id="btnNurseryRhyme">Generate nursery rhyme</button>
<button id="btnNurseryRhymeAjax">Generate nursery rhyme from AJAX</button>

{{#section 'jquery'}}
<script>
  $(document).ready(function(){

    var nurseryRhymeTemplate = Handlebars.compile(
      $('#nurseryRhymeTemplate').html());           //取脚本内的document对象

    var $nurseryRhyme = $('#nurseryRhyme');         //定义变量

    $('#btnNurseryRhyme').on('click', function(evt){//监控id#btnNurseryRhyme
      evt.preventDefault();                         //取消事件的默认动作
      $nurseryRhyme.html(nurseryRhymeTemplate({     //渲染document对象
        animal: 'basilisk',
        bodyPart: 'tail',
        adjective: 'sharp',
        noun: 'a needle'
      }));
    });

    $('#btnNurseryRhymeAjax').on('click', function(evt){//监控id#btnNurseryRhymeAjax
      evt.preventDefault();
      $.ajax('/data/nursery-rhyme',{                    //jquery.ajax请求/data/nursery-rhyme内的json对象
        success: function(data){                        //成功则用json对象渲染document
          $nurseryRhyme.html(nurseryRhymeTemplate(data))
        }
      });
    });

  });
</script>
{{/section}}
